<template>
  <!-- 编辑角色弹框 -->
  <el-dialog title="编辑角色" :visible="roleEditDialogVisible" @close="onClose">
    <el-form :model="roleEditForm">
      <el-form-item label="角色名称" :label-width="roleEditFormLabelWidth">
        <el-input v-model="roleEditForm.roleName"></el-input>
      </el-form-item>
      <el-form-item label="权限编码" :label-width="roleEditFormLabelWidth">
        <el-input v-model="roleEditForm.roleCode"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="roleEditFormLabelWidth">
        <el-input v-model="roleEditForm.descr"></el-input>
      </el-form-item>
      <el-form-item label="权限选择" :label-width="roleEditFormLabelWidth">
        <!-- <el-input v-model="roleEditForm.parentId"></el-input> -->
        <el-tree
          :data="menuData"
          default-expand-all
          node-key="key"
          ref="tree1"
          highlight-current
          :props="defaultProps"
          show-checkbox
          check-strictly
        ></el-tree>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="handleSubmit"
        >确认</el-button
      >
      <el-button type="danger" size="mini" @click="onCancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getMenuTree } from "@/api/menu";
import { addRole, updateRole } from "@/api/role";

export default {
  name: "RoleEdit",
  props: ["roleEditDialogVisible"],
  data() {
    return {
      //   listLoading: true,
      roleEditForm: {
        id: "",
        roleName: "",
        roleCode: "",
        descr: "",
        premis: [],
      },
      roleEditFormLabelWidth: "100px",
      //   roles: [],
      //   roleOptions: [],
      menuData: null,
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    reset() {
      this.roleEditForm.roleName = "";
      this.roleEditForm.roleCode = "";
      this.roleEditForm.descr = "";
    },
    handleSubmit() {
      var nodes = this.$refs.tree1.getCheckedNodes(false, true);

      if (nodes.length < 1) {
        this.$message.error("请选择权限");
      } else if (nodes.length >= 1) {
        var params = {
          menus: nodes,
          id: this.roleEditForm.id,
          roleName: this.roleEditForm.roleName,
          roleCode: this.roleEditForm.roleCode,
          descr: this.roleEditForm.descr,
        };

        updateRole(params).then((response) => {
          if (response.code == "200") {
            this.reset();
            this.$emit("success");
          } else {
            this.reset();
            this.$emit("failed", response.data.msg);
          }
        });
      }
    },
    onCancel() {
      this.$emit("cancel");
    },
    onClose() {
      this.$emit("close");
    },
    setFormValues(record) {
      console.log("-----record----" + record);

      this.roleEditForm.id = record.id;
      this.roleEditForm.roleName = record.roleName;
      this.roleEditForm.roleCode = record.roleCode;
      this.roleEditForm.descr = record.descr;

      this.$nextTick(function () {
        this.$refs.tree1.setCheckedKeys(record.permis);
      });
    },
  },
  created() {
    getMenuTree().then((response) => {
      console.log("roleEdit.menuTree=" + JSON.stringify(response.data));
      this.menuData = response.data;
    });
  },
};
</script>
